<template>

  <div>
     <div class="search">
         <input
            class="search-input"
            type="text"
            placeholder="输入城市名或者拼音"
            v-model="keyword"
          >
     </div>
     <div class="search-content" ref="search" v-show="keyword">
         <ul>
             <li class="search-item border-bottom" v-for="item of list" :key="item.id"   @click="handleCityClick(item.name)">{{item.name}}</li>
             <li class="search-item border-bottom" v-show="hasNoData">没有找到数据</li>
         </ul>
     </div>
  </div>
</template>


<script>
import Bscroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
  name:'CitySearch',
  props:{
      cities: Object
  },
  data (){
      return {
          keyword : '',
          list:[],
          timer: null
      }
  },
  methods:{
         handleCityClick (city){
            //console.log(city)
            //this.$store.dispatch('changeCity', city)
            this.changeCity(city)
            this.$router.push('/')
        },
        ...mapMutations(['changeCity'])
  },
  computed:{
      hasNoData() {
          return !this.list.length
      }
  },
  watch :{
      keyword () {
          if(this.timer){ //函数节流
              clearTimeout(this.timer)
          }
          if(!this.keyword){
              return this.list = []
          }
          this.timer = setTimeout( () => {
              const result = []
              for (let i in this.cities){
                this.cities[i].forEach((value) => {
                    if(value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1){ //查找关键字
                        result.push(value)
                    }
                });
              }
              this.list = result //将符合的数据传给list
          },100)
      }
  },
  mounted (){
      this.scroll = new Bscroll(this.$refs.search)
  }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .search
        height .72rem
        background $bg-color
        padding  0 .1rem
        .search-input
            box-sizing border-box
            height .62rem
            line-height  .62rem
            width 100%
            text-align center
            border-radius .06rem
            color #666
            padding 0 .1rem
    .search-content
        z-index 1
        overflow hidden
        position absolute
        top 1.58rem
        left 0
        right 0
        bottom 0
        background #eeeeee
        .search-item
            line-height .62rem
            padding-left .2rem
            color #666
            background #fff




</style>
